<template>
  <view class="address">
    <view class="add-address" v-if="JSON.stringify(address) === '{}'">
      <button type="primary" size="mini" @click="chooseAddress">请选择收货地址+</button>
    </view>
    <view class="chose-address" v-else>
      <view class="info-top">
        <text>收货人：{{address.name}}</text>
        <view>
          <text>电话：{{address.tel}}</text>
          <uni-icons type="forward" size="20" @click="switchPages"></uni-icons>
        </view>
      </view>
      <view class="info-bottom">
        <text>收货地址：{{address.addr}}{{address.detail}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapGetters
  } from 'vuex'
  import {
    getUserInfo
  } from '../../common/storage.js'
  const utils = require('@/common/tools')
  export default {
    name: "user-address",
    inject: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        address: JSON.parse(getUserInfo() || '{}')
        // choosed: getUserInfo()
      };
    },
    computed: {
      // ...mapGetters(['address'])
    },
    methods: {
      ...mapMutations('userInfo', ['updateUserAddr']),
      // 选择收货地址
      async chooseAddress() {
        // const [err, res] = await uni.getFuzzyLocation().catch(err => err)
        const [err, res] = await uni.chooseAddress().catch(err => err)
        if (!err && res.errMsg === 'chooseAddress:ok') {
          // 获取完整的收货地址
          res['fullAddr'] = res.provinceName + res.cityName + res.countyName
          this.address = {
            name: res.userName,
            tel: res.telNumber,
            addr: res.fullAddr,
            detail: res.detailInfo
          }
          // 保存收货地址
          this.updateUserAddr(res)
          // console.log(this.address);
        }
      },
      // 跳转到选择收货地址页面
      switchPages() {
        utils._navigatorTo('/subPackages/user-address/user-address', this.address)
      }
    }
  }
</script>

<style lang="scss">
  .address {
    height: 90px;

    .add-address {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    .chose-address {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 10px;
      font-size: 14px;

      .info-top {
        display: flex;
        justify-content: space-between;
        margin: 15px 0 10px;
      }
    }
  }
</style>
